<!-- FlipClock.vue -->
<template>
    <div class="clock">
      <FlipUnit :value="hours" />
      <span class="separator">:</span>
      <FlipUnit :value="minutes" />
      <span class="separator">:</span>
      <FlipUnit :value="seconds" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import FlipUnit from './flickUnit.vue';
  
  const currentTime = ref(new Date());
  
  const hours = ref('00');
  const minutes = ref('00');
  const seconds = ref('00');
  
  function updateTime() {
    const now = new Date();
    hours.value = String(now.getHours()).padStart(2, '0');
    minutes.value = String(now.getMinutes()).padStart(2, '0');
    seconds.value = String(now.getSeconds()).padStart(2, '0');
  }
  
  let timer: number;
  
  onMounted(() => {
    updateTime();
    timer = setInterval(updateTime, 1000);
  });
  
  onBeforeUnmount(() => {
    clearInterval(timer);
  });
  </script>
  
  <style scoped>
  .clock {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    min-height: 100vh;
    gap: 0.5em;
  }
  
  .separator {
    color: white;
    font-size: 4em;
    margin: 0 0.1em;
  }
  </style>